@include('home.public.header')

<!-- HEADING-BANNER START -->
<div class="heading-banner-area overlay-bg">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="heading-banner">
					<div class="heading-banner-title">
						<h2>单 品</h2>
					</div>
					<div class="breadcumbs pb-15">
						<ul>
							<li><a href="/">首页</a></li>
							<li>单 品</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- HEADING-BANNER END -->
<!-- PRODUCT-AREA START -->
<div class="product-area single-pro-area pt-80 pb-80 product-style-2">
	<div class="container">
		<div class="row shop-list single-pro-info no-sidebar">
			<!-- Single-product start -->
			<div class="col-lg-12">
				<div class="single-product clearfix">
					<!-- Single-pro-slider Big-photo start -->
					<div class="single-pro-slider single-big-photo view-lightbox slider-for">
						<div>
							<img src="/uploads/{{$good_details->main_img}}" alt="" />
							<a class="view-full-screen" href="/uploads/{{$good_details -> main_img}}"  data-lightbox="roadtrip" data-title="My caption">
								<i class="zmdi zmdi-zoom-in"></i>
							</a>
						</div>
						@foreach($goodimg as $v)
							<div>
								<img src="/uploads/{{$v->images}}" alt="" />
								<a class="view-full-screen" href="/uploads/{{$v->images}}"  data-lightbox="roadtrip" data-title="My caption">
									<i class="zmdi zmdi-zoom-in"></i>
								</a>
							</div>
						@endforeach


					</div>
					<!-- Single-pro-slider Big-photo end -->
					<div class="product-info">
						<div class="fix">
							<h4 class="post-title floatleft">{{$good_details -> good_name}}</h4>
							<span class="pro-rating floatright">
											<a href="#"><i class="zmdi zmdi-star"></i></a>
											<a href="#"><i class="zmdi zmdi-star"></i></a>
											<a href="#"><i class="zmdi zmdi-star"></i></a>
											<a href="#"><i class="zmdi zmdi-star-half"></i></a>
											<a href="#"><i class="zmdi zmdi-star-half"></i></a>
											<span>( 27 Rating )</span>
										</span>
						</div>
						<div class="fix mb-20">
							<span class="pro-price">$ {{$good_details->good_price}}</span>
						</div>
						<div class="product-description">
							<p id="lead">{!! $good_details->good_dec !!}</p>
						</div>
						<!-- color start -->
						<div class="color-filter single-pro-color mb-20 clearfix">
							<ul id="colors">
								<li><span class="color-title text-capitalize">color</span></li>
								@foreach($goodcolor as $v)
									<li class="colors"><a ><span class="color" goodcolor="{{$v -> goodcolor_id}}" style="background-color: {{$v->color}};"></span></a></li>
								@endforeach
							</ul>


						</div>
						<script src="/static/home/js/vendor/jquery-1.11.1.min.js"></script>
						<script>
							// var str = $("#lead").html().replace(/&lt;/g,"<");
							// str = str.replace(/&gt;/g,">");
							// $("#lead").html(str);
							$("#colors li ").click(function(){
								$(this).siblings('li').removeClass('active');  // 删除其他兄弟元素的样式
								$(this).addClass('active');// 添加当前元素的样式
							})

						</script>
						<!-- color end -->
						<!-- Size start -->
						<div class="size-filter single-pro-size mb-35 clearfix">
							<ul>

								<li><span class="color-title text-capitalize">size</span></li>
								@foreach($goodsize as $v)
									<li class="goodsize" size="{{$v->goodsize_id}}"><a href="javascript:;">{{$v->good_size}}</a></li>
								<!-- <li class="active"><a href="#">{{$v->good_size}}</a></li> -->
								@endforeach

							</ul>
						</div>
						<!-- Size end -->
						<div class="clearfix">
							<div class="cart-plus-minus">
								<input type="text" value="1" name="qtybutton" class="cart-plus-minus-box number">
							</div>
							<div class="product-action clearfix">

								<a href="javascript:;" data-toggle="tooltip" goodid="{{$good_details -> good_id}}" id="wish" data-placement="top" title="Wishlist" class="{{$color}}"><i class="zmdi zmdi-favorite-outline"></i></a>
								<a href="#" data-toggle="modal"  data-target="#productModal" title="Quick View"><i class="zmdi zmdi-zoom-in"></i></a>
								<a href="#" data-toggle="tooltip" data-placement="top" title="Compare"><i class="zmdi zmdi-refresh"></i></a>
								<a href="javascript:;" data-toggle="tooltip" goodid="{{$good_details -> good_id}}" id="cart"  data-placement="top" title="Add To Cart" class="{{$cartColor}}"><i class="zmdi zmdi-shopping-cart-plus"></i></a>
							</div>
						</div>
						<!-- Single-pro-slider Small-photo start -->
						<div class="single-pro-slider single-sml-photo slider-nav">
							<div>
								<img  style="width: 129px; height: 150px;" src="/uploads/{{$good_details->main_img}}" alt="" />
							</div>
							@foreach($goodimg as $v)
								<div>
									<img style="width: 129px; height: 150px;" src="/uploads/{{$v->images}}"  alt="" />
								</div>
							@endforeach


						</div>
						<!-- Single-pro-slider Small-photo end -->
					</div>
				</div>
			</div>
			<!-- Single-product end -->
		</div>
		<!-- single-product-tab start -->
		<div class="single-pro-tab">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
					<div class="single-pro-tab-menu">
						<!-- Nav tabs -->
						<ul class="">
							<li><a href="#description" data-toggle="tab">Description</a></li>
							<li class="active"><a href="#reviews"  data-toggle="tab">Reviews</a></li>
							<li><a href="#information" data-toggle="tab">Information</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
					<!-- Tab panes -->
					<div class="tab-content">
						<div class="tab-pane" id="description">
							<div class="pro-tab-info pro-description">
								<h3 class="tab-title title-border mb-30">{{$good_details -> good_name}}</h3>
								<p>{!! $good_details -> good_dec !!}</p>
								<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan egestas elese ifend. Phasellus a felis at est bibendum feugiat ut eget eni Praesent et messages in con sectetur posuere dolor non.</p> -->
								<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan egestas elese ifend. Phasellus a felis at est bibendum feugiat ut eget eni Praesent et messages in con sectetur posuere dolor non.</p> -->
							</div>
						</div>
						<div class="tab-pane active" id="reviews">
							<div class="pro-tab-info pro-reviews">
								<div class="customer-review mb-60">
									<h3 class="tab-title title-border mb-30">Customer review</h3>
									<ul class="product-comments clearfix">
										@foreach($goods_reply as $v)

											<li class="mb-30" style="width: 100%;">
												<div class="pro-reviewer">
													<img src="/static/home/img/reviewer/1.jpg" alt="" />
												</div>
												<div class="pro-reviewer-comment">
													<div class="fix">
														<div class="floatleft mbl-center">
															<h5 class="text-uppercase mb-0"><strong>{{$v->reply_name}}</strong></h5>
															<p class="reply-date">27 Jun, 2017 at 2:30pm</p>
														</div>
														<div class="comment-reply floatright">
															<a href="#"><i class="zmdi zmdi-mail-reply"></i></a>
															<a href="#"><i class="zmdi zmdi-close"></i></a>
														</div>
													</div>
													<p class="mb-0">{{$v->reply_content}}</p>
												</div>
											</li>
										@endforeach
									</ul>
									<!-- <div style="clear:both;"></div> -->
								</div>
								<style>
									/* .product-comments li {
                                        float: none;
                                    } */
								</style>
								<div class="leave-review">
									<h3 class="tab-title title-border mb-30">留下您的评论</h3>
									<div class="your-rating mb-30">
										<p class="mb-10"><strong>您的评分</strong></p>
										<span>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
													</span>
										<span class="separator">|</span>
										<span>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
													</span>
										<span class="separator">|</span>
										<span>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
													</span>
										<span class="separator">|</span>
										<span>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
													</span>
										<span class="separator">|</span>
										<span>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
														<a ><i class="zmdi zmdi-star-outline"></i></a>
													</span>
									</div>
									<div class="reply-box">
										<form action="/reply/{{$good_details->good_id}}" method="post">
											<div class="row">
												<div class="col-md-6">
													<input type="text" placeholder="请输入您的昵称" name="reply_name" required/>
												</div>
												<div class="col-md-6">
													<input type="text" placeholder="请输入您的邮箱" name="reply_email" required/>
												</div>
											</div>
											<div class="row">
												<div class="col-md-12">
													<textarea class="custom-textarea" name="reply_content" placeholder="请输入您的留言内容..." required ></textarea>
													<button type="submit" data-text="submit review" class="button-one submit-button mt-20">提交评论</button>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="information">
							<div class="pro-tab-info pro-information">
								<h3 class="tab-title title-border mb-30">产品信息</h3>
								<p>{{$good_details -> good_info}}</p>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
		<!-- single-product-tab end -->
	</div>
</div>
<!-- PRODUCT-AREA END -->
@include('home.public.footer2')
<script>
	var number = '';
	var goodsize = '';
	var goodcolor = '';
	//心愿单
	$(document).on('click',"#wish",function () {
		goodid =  $(this).attr('goodid');
		var falg = $(this).attr('class');
		let that = this;
		if(falg == 1) {
			// console.log(1)
			$.ajax({
				type: 'post',
				url: '/wish',
				data: {'goodid':goodid},
				dataType: "html",
				success:function(res){
					if(res==1) {
						// console.log($('#wish .zmdi '))
						$(that).addClass('wishColor');
					}
				}
			})
		} else {
			// console.log(2)
			//取消心愿单
			$.ajax({
				type: 'post',
				url: '/wish_del',
				data: {'goodid':goodid},
				dataType: "html",
				success:function(res){
					if(res==1) {
						// console.log($('#wish .zmdi '))
						$(that).removeClass('wishColor');
						var falg = 1;
					}
				}
			})
		}
	});

	$(".goodsize ").on('click',function () {
		$(this).addClass('active').siblings().removeClass();
	})


	//购物车
	$(document).on('click',"#cart",function () {
		goodid =  $(this).attr('goodid');
		number = $('.number').val();
		goodsize = $(".goodsize.active").attr('size');
		goodcolor = $('.colors.active').children().children('.color').attr('goodcolor')

		data = {};
		data['goodid'] = goodid;
		data['number'] = number;
		data['goodsize'] = goodsize;
		data['goodcolor'] = goodcolor;
		console.log(data);
		let that = this;

		$.ajax({
			type: 'post',
			url: '/cart1',
			data: data,
			dataType: "html",
			success:function(res){
				// console.log(res)
				if(res == 2 | res == 3) {
					alert("添加成功");
					location.reload();
				}
			}
		})
	});

</script>